import React, { Component, useState } from 'react'
import style from "../../assets/css/login/index.less"
import logo from "../../assets/img/logo.png"
import { Form, Input, Row, Col, Button, Tabs, message, Radio, Space, } from 'antd';
import { UserOutlined, LockOutlined, MobileOutlined, MailOutlined, } from '@ant-design/icons';
import { login, tel, shopname, addShop } from "../../apis/login/index"
import qs, { stringify } from 'querystring'
import { useSelector, useDispatch } from "umi"
import PicturesWall from "../../component/Upload/PicturesWall"
import PicturesWall2 from "../../component/Upload/PictuersWall2"
export default function index(props) {
    let url1 = ''
    let url2 = ''
    let obj = {}
    const { TabPane } = Tabs;
    const dispatch = useDispatch()
    const userInfo = useSelector(state => state.user.users)
    console.log(userInfo);
    let [state, setState] = useState(0)
    const onFinish = async (values) => {
        const user = qs.stringify(values)
        const res = await login(user)
        console.log(res);
        if (res.status == 200) {
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem("userInfo", JSON.stringify({ ...res.data.data.user }))
            dispatch({
                type: "user/initUser",
                payload: [res.data.data.user]
            })
            props.history.replace("/home")
            message.success("登陆成功")
        }
    }
    const onFinish1 = async (values) => {
        obj = values
        obj.idCardImg = url1
        obj.licenceImg = url2
        let res1 = await tel(obj.tel)
        let res2 = await shopname(obj.shopName)
        const shopname11 = qs.stringify(obj)
        console.log(shopname11);
        console.log(res1);
        console.log(res2);
        if(res1.data.boo && res2.data.boo){
            let res3 = await addShop(shopname11)
            console.log(res3);
            if(res3.data.result){
                message.success("添加成功")
            }


        }else{
            message.error("添加失败")
        }
    }
    const onChange = e => {
        // console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    const [value, setValue] = React.useState(1);
    const [form] = Form.useForm();
    const [form1] = Form.useForm();
    const changeState = () => {
        if (state == 0) {
            setState(1)

        } else {
            setState(0)
        }
    }
    const getUrl1 = (value) => {
        url1 = value
        return value
    }
    const getUrl2 = (value) => {
        url2 = value

        return value
    }
    const main = () => {

        if (state == 0) {
            return <>
                <div className={style.content}>
                    <img src={logo} alt="" />
                    <span>
                        赤兔养车
                    </span>
                </div>
                <div className={style.from}>
                    <Tabs style={{ display: "flex", justifyContent: "space-evenly" }} animated={true} size="large" defaultActiveKey="1" >
                        <TabPane tab="账户密码登录" key="1">
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="username"
                                    rules={[{ required: true, message: 'Please input your Username!' }]}>
                                    <Input prefix={<UserOutlined className="site-form-item-icon" />}
                                        size="large" />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[{ required: true, message: 'Please input your Password!' }]}
                                >
                                    <Input
                                        size="large"
                                        prefix={<LockOutlined className="site-form-item-icon" />}
                                        type="password"

                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" block={true} size="large" type="primary" htmlType="submit" className="login-form-button">
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                        <TabPane tab="手机号登录" key="2">
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="username"
                                    rules={[{ required: true, message: 'Please input your Username!' }]}
                                >
                                    <Input prefix={<MobileOutlined className="site-form-item-icon" />}
                                        size="large" />
                                </Form.Item>
                                <Form.Item >
                                    <Row gutter={8}>
                                        <Col span={17}>
                                            <Form.Item
                                                name="captcha"
                                                noStyle
                                                rules={[{ required: true, message: 'Please input the captcha you got!' }]}
                                            >
                                                <Input prefix={<MailOutlined className="site-form-item-icon" />}
                                                    size="large"></Input>

                                            </Form.Item>
                                        </Col>
                                        <Col span={7}>
                                            <Button>获取验证码</Button>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" block={true} size="large" type="primary" htmlType="submit" className="login-form-button">
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                    </Tabs>


                </div>
                <div className={style.merchant}>
                    <span>注册账户</span>
                    <span onClick={changeState}>商家入驻</span>
                </div>
            </>
        }
        else {
            return <>

                <div className={style.content}>
                    <img src={logo} alt="" />
                    <span>
                        赤兔养车
                    </span>
                </div>
                <div className={style.from}>
                    <Form
                        form={form1}
                        layout="vertical"
                        onFinish={onFinish1}
                        autoComplete="off"
                    >
                        <Form.Item
                            name="type"
                            label="商铺类型"
                            rules={[
                                {
                                    required: true,
                                    message: '商铺类型不能为空',
                                },
                            ]}
                        >
                            <Radio.Group onChange={onChange} value={value}>
                                <Radio value={0}>充电站</Radio>
                                <Radio value={1}>其他</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            name="shopName"
                            label="店铺名"
                            rules={[{ required: true }, { type: 'string', warningOnly: true }, { type: 'string', min: 3 }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="tel"
                            label="手机号"
                            rules={[{
                                required: true,
                                message: '手机号不能为空',
                            },
                            {
                                pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                                message: "请输入正确手机号码"
                            }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="address"
                            label="店铺地址"
                            rules={[{ required: true }, { type: 'string', warningOnly: true }, { type: 'string', min: 6 }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="managerName"
                            label="注册人"
                            rules={[{ required: true }, { type: 'string', warningOnly: true }, { type: 'string', min: 2 }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="idCard"
                            label="身份证号"
                            rules={[{
                                required: true,
                                message: '身份证号码不能为空',
                            },
                            {
                                pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                message: "请输入身份证号"
                            }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="idCardImg"
                            label="身份证照片"
                        >
                            <PicturesWall getUrl1={getUrl1}></PicturesWall>
                        </Form.Item>

                        <Form.Item
                            name="licenceNo"
                            label="营业执照编号"
                            rules={[{ required: true }, { type: 'string', warningOnly: true }, { type: 'string', min: 6 }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="licenceImg"
                            label="营业执照照片"
                        >
                            <PicturesWall2 getUrl2={getUrl2}></PicturesWall2>
                        </Form.Item>
                        <Form.Item>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    立即申请
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>

                </div>
                <div className={style.merchant}>
                    <span>注册账户</span>
                    <span onClick={changeState}>使用已有帐户登录!</span>
                </div>
            </>
        }
    }

    return (
        <div className={style.BackgroundBox}>
            <div className={style.Smallbox}>
                {main()}
            </div>
        </div>
    )
}
